<script>
import { h } from 'vue'
export default {
  name: 'xtx-pane',
  props: {
    label: {
      type: String,
      require: true
    },
    hotNumber: [Number, String]
  },
  setup(proxy, ev) {
    // console.log(ev);
  },
  render(proxy) {
    const PANE = proxy.$slots.default()
    const PANESLIST = proxy.$parent.panes
    const INDEX = PANESLIST.findIndex((v) => proxy.label === v.props.label)

    const FLAG = INDEX === proxy.$parent.modelValue
    const panesProps = {
      class: 'xtx-panes',
      style: {
        display: FLAG ? '' : 'none'
      }
    }
    return h('div', { ...panesProps }, PANE)
  }

}
</script>

<style></style>
